<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
	<!-- 	<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		<!-- <view>下方为用户信息相关</view> -->
		<view v-if="userStore.token" class="text-area">
			<!-- {{userStore.userInfo.nickname}}
			<uni-button @click="logout">登出</uni-button> -->
		</view>
		<view v-else class="text-area">
			未登录
			<button @click="toLogin()">去登陆(replace)</button>
		</view>
		<!-- <view>下方为请求和路由相关</view> -->
		
		<scroll-view scroll-y refresher-enabled refresher-threshold="50" @refresherrefresh="onRefresh"
					style="height: 100%;">
					<view v-for=" (item , index)  in  users " :key="index">
					 
							<uni-card :title="item.name" :extra="'学生:'+item.studentName" @click="onClick(item)">
								<text class="uni-body"> 籍贯：{{ item.address }} </text>	<br>
								<text class="uni-body"> 班级:{{ item.grade }} </text><br>
								 
							 <image style="width: 100px; height: 100px; background-color: #eeeeee; text-align: center" mode="aspectFill" :src="item.picture"   ></image>
							<br> <text> 入学时间 :{{ item.CreatedAt   }}</text><br>
								 
							</uni-card>
		
						 
					</view>
				</scroll-view>
		
 
<!-- 		<button type="primary" @click="send()">发送请求</button>
		<button type="primary" @click="go()">页面跳转(navigate)</button>
		<button type="primary" @click="switchGo()">跳转到面板某一页</button> -->
		
		<!-- <view>路由跳转白名单黑名单配置页面的位置在 /utils/permission.js</view>
		<view>时间格式化 {{ formatTimeToStr(new Date()) }} ---- {{ formatTimeToStr(new Date(),"yyyy-dd-mm") }}</view> -->
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {useUserStore} from "@/pinia/modules/user.js"
	import { myRouter } from "@/utils/permission";
	import { formatTimeToStr } from "@/utils/date.js";
	import {getCaptcha, register ,getClientUserList,getStudentProfileList} from "@/api/base.js"
	const title = ref("testtitle")
	const users = ref([])
	
	const  avatarList = register([{
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
			}, {
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
			}, {
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
			}])
	const userStore = useUserStore()
	
	const toLogin = () => {
		myRouter("/pages/user/login",true)
	}
	
	const send = async () =>{
		const res = await getCaptcha()
		if(res.code === 0){
			uni.showToast({
				title:"发送成功"
			})
		}
	}
	
	
	const userlist = async () =>{
		const res = await getStudentProfileList()
		if(res.code === 0){
			console.log("用户信息", res.data.list)
			
			users.value =  res.data.list
			uni.showToast({
				title:"发送getClientUserList成功"
			})
		}
	}
	userlist()
	const go = () =>{
		myRouter("/pages/user/login")
	}
	
 
 
	 
	 const onClick=(item )=>{
		  var id = item.ID;
     if (typeof id === 'number' || typeof id === 'string') {
       uni.navigateTo({
         url: `/pages/home/view?ID=${id}`
       });
     } else {
       console.error('传递的 id 不是有效的值', id);
     }
   };
	   
	  
	
	const switchGo = () =>{
		uni.switchTab({
			url: '/pages/home/my'
		})
	}
	
	const logout = () =>{
		userStore.loginOut()
	}
  // 实现下拉刷新方法
  const onRefresh = async () => {
    try {
      // 调用获取用户列表的方法
      await userlist();
      // 刷新完成，关闭刷新状态
      uni.stopPullDownRefresh();
    } catch (error) {
      console.error('刷新失败:', error);
      // 刷新失败，关闭刷新状态
      uni.stopPullDownRefresh();
      uni.showToast({
        title: '刷新失败',
        icon: 'none'
      });
    }
  };
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.alenform {
			padding: 15px;
			background-color: #fff;
	
			.form-item {
				padding-bottom: 15rpx;
			}
	
			.title {
				float: left;
				width: 20%;
				color: #666;
			}
	
			.uni-input {
				float: left;
				width: 79%;
				border: solid 1px #dadada;
				border-radius: 2px;
			}
		}
	
		.example {
			padding: 15px;
			background-color: #fff;
	
		}
	
		.segmented-control {
			margin-bottom: 15px;
		}
	
		.button-group {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}
	
		.form-item {
			display: flex;
			align-items: center;
	
			.easyinput-border {
				border: solid 1px #dadada;
			}
		}
	
		.button {
			display: flex;
			align-items: center;
			height: 35px;
			margin-left: 10px;
		}
	
		.shouhou {
			float: right;
			padding-right: 10rpx;
		}
	
		.uni-body {
			width: 100%;
			line-height: 1.5em;
			word-wrap: break-word;
			width: 100%;
		}
	
	
	
		.status {
			float: right;
			padding-right: 20rpx;
		}
</style>
